<template>
  <div class="goods-list">
    <MyHeader title="商品列表页"></MyHeader>
    <MyTable></MyTable>
  </div>
</template>

<script>
// 目标1: 渲染数据
// 1.1 在 main.js 中给 axios 配置默认基地址
// 1.2 在 MyGoodsList.vue 中的 created 发送请求获取数据, 将数据保存至 data
// 1.3 将数据传递给 MyTable.vue
// 1.4 在 MyTable.vue 中循环创建 tr 渲染数据
// 1.5 给删除按钮添加 bootstrap 样式

// 目标2: 使用插槽提高表格的灵活性
// 2.1 在 MyTable.vue 中使用 <slot></slot> 占位并设置 name 属性
// 2.2 在 MyGoodsList.vue 中使用 <template></template> 包裹要传入的标签, 并使用 v-slot 指令指定具体的名称
// 2.3 由于 tbody 中的 td 需要用到循环出来的数据, 所以还需要使用作用域插槽将数据传递给 MyGoodsList.vue 的 template 处

// 目标3: 渲染徽标
// 3.1 使用 v-for 循环 tags 创建 span
// 3.2 去 bootstrap 官网查找徽标类名样式进行修改

// 目标4: 删除数据
// 4.1 给删除按钮绑定点击事件, 事件处理函数写在当前组件中
// 4.2 点击时传入 id
// 4.3 根据 id 找到索引并删除对应的数据

// 目标5: 添加标签
// 5.1 准备 +Tag 按钮和文本框
// 5.2 使用 v-if 和 v-else 控制两者的互斥关系 (需要使用 row.inputVisible 属性)
// 5.3 给按钮绑定点击事件, 点击时将 row.inputVisible 设置为 true
// 5.4 使用自定义指令, 绑定给 input 实现自动聚焦
// 5.5 给 input 绑定失去焦点事件, 修改 inputVisible 为 false
// 5.6 给 input 绑定键盘按下事件, .esc 修饰符实现清空文本框
// 5.6 使用 .enter 修饰符实现非空校验及添加数据 (事件传参传入 row)

import MyHeader from '../components/MyHeader.vue'
import MyTable from '../components/MyTable.vue'
export default {
  components: {
    MyHeader,
    MyTable
  },

  data () {
    return {}
  },

  mounted () {},

  methods: {}
}
</script>

<style lang="less" scoped>
.goods-list {
  padding-top: 45px;
}
</style>
